<template>
    <!--我的购物车-->
    <div class="contain">
        <div class="product-header">

        </div>
        <div class="main-box">
            <div class="result">
                <div class="icon"></div>
                <div class="right-box">
                    <p class="result-tip">订单提交成功！</p>
                    <p class="result-extra">
                        您的订单已经成功生成，选择你想用的支付方式进行支付
                    </p>
                </div>
            </div>
            <div class="order-msg">
                <p>订单号：<span class="imp">{{orderId}}</span></p>
                <p>订单总价：<span class="imp">￥{{price}}</span></p>
                <a>您可以在学习中心的我的订单查看该订单</a>
            </div>
            <div class="payWaychoose-box">
                <div class="title">请选择支付方式</div>
                <div class="payway">
                    <a-radio-group
                        v-model="payway"
                        @change="onChangePayWay"
                        size="large"
                    >
                        <a-radio :value="1" class="wx">
                        </a-radio>
                        <a-radio :value="2" class="zfb">
                        </a-radio>
                    </a-radio-group>
                </div>

            </div>
            <div class="count-box">
                <p></p>
                <div class="pay-box">
                    <div class="pay" @click="jumpPay">立即支付</div>
                </div>
            </div>
            <div v-html="html"></div>
            <div class="popup" v-show="payPop" @click.self="closePayPop">
                <div class="body">
                    <div class="qrcode" ref="qrcode"></div>
                    <p>请用微信扫码支付</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
    name: 'order',
    components: {
        /**/
    },
    data() {
        return {
            html: null,
            orderId: null,
            price: 0,
            addressChoose: null,
            status: 0, // 订单状态
            payway: null,
            payPop: false,
            payUrl: null,
            timer: null
        };
    },
    computed: {

    },
    watch: {
        payPop(val) {
            if(val) {
                clearInterval(this.timer);
                this.timer = setInterval(()=>{
                    this.checkOrderStatus()
                },5000)
            }
        }
    },
    destroy() {
        clearInterval(this.timer);
    },
    mounted() {
        this.orderId = this.$route.query.orderId;
        this.price = Number(this.$route.query.price)/100;
        this.desc = this.$route.query.desc;
        if(this.$util.authLogin()) {
            this.initOrder(this.orderId)
        }
    },
    methods: {
        // 查询信息
        initOrder(orderId) {
            if(!orderId) {
                this.$util.alert('获取订单信息失败');
                return;
            }
        },
        onChangePayWay() {

        },
        jumpPay() {
            if(!this.payway) {
                this.$util.alert('请选择支付方式');
                return;
            }
            switch (this.payway) {
                // 微信
                case 1: this.jumpPayWx();break;
                // 支付宝
                case 2: this.jumpPayZFB();break;
            }

        },
        // 微信支付
        jumpPayWx() {
            this.payPop=true;
            if(this.payUrl){
                return;
            }
            this.$api.ajaxData({
                pathName: 'doGetVxpay',
                authorization: true,
                method: 'post',
                data: {
                    orderno: this.orderId,
                    free: this.price,
                    desc: this.desc || this.orderId
                }
            })
                .then(res => {
                    this.payUrl = res.obj;
                    this.creatQrCode();
                })
        },
        // 支付宝支付
        jumpPayZFB() {
            this.$api.ajaxData({
                pathName: 'doGetZfbInfo',
                authorization: true,
                method: 'post',
                data: {
                    name: this.desc || this.orderId,
                    code: this.orderId,
                    je: this.price,
                    ms: this.desc || this.orderId
                }
            })
                .then(res => {
                    this.html = res.obj;
                    this.$nextTick(() => {
                        document.forms[0].submit()   //渲染支付宝支付页面
                    })
                })
        },
        // 微信二维码
        creatQrCode() {
            var qrcode = new QRCode(this.$refs.qrcode, {
                text: 'xxxx',
                width: 300,
                height: 300,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
            qrcode.makeCode(this.payUrl);
        },
        // 关闭微信二维码
        closePayPop() {
            this.payPop = false;
            clearInterval(this.timer);
        },
        // 微信检查订单状态
        checkOrderStatus() {
            this.$api.ajaxData({
                pathName: 'doGetVxres',
                method: 'get',
                errorFunc: false,
                params: {
                    oid: this.orderId,
                }
            }).then(res => {
                clearInterval(this.timer);
                this.html = res.obj;
                this.$notification.open({
                    message: '信息提示',
                    description: '订单支付成功'
                });
                this.$router.replace({
                    name: 'studyCenter'
                })
            })
        }
    }
};
</script>
<style scoped lang="scss">
    .contain {
        .product-header {
            padding: 40px 0;
            height: 110px;
            color: #fff;
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100vw;
                height: 330px;
                background: url('../../assets/image/back/u542.jpg') no-repeat;
                background-size: 100% 100%;
            }
            .title {
                position: relative;
                line-height: 30px;
                padding: 0 30px;
                font-size: 28px;
            }

        }
        .main-box {
            position: relative;
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 0 5px rgba(0,0,0,0.05);
            .result {
                display: flex;
                padding: 50px 0;
                align-items: center;
                justify-content: center;
                .icon {
                    display: block;
                    width: 100px;
                    height: 100px;
                    margin: 0 20px;
                    background: url("../../assets/image/icon/icon-car.png") no-repeat;
                    background-size: cover;
                }
                .right-box {
                    .result-tip {
                        margin-bottom: 10px;
                        font-size: 24px;
                        color: #333;
                    }
                }
            }
            .order-msg {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 50px;
                background: #f7f7f7;
                p {
                    margin: 0 30px 0 0;
                    font-weight: bold;
                    .imp {
                        color: #ff6a00;
                    }
                }
                a {
                    color: #007aff;
                }
            }
            .payWaychoose-box {
                .title {
                    padding: 0 20px;
                    line-height: 50px;
                    font-size: 16px;
                    font-weight: bold;
                    border-bottom: 1px solid #f7f7f7;
                }
                .payway {
                    margin: 0 auto 30px;
                    text-align: center;
                    .wx {
                        width: 100px;
                        height: 50px;
                        background: url("../../assets/image/icon/icon-wxpay.png") no-repeat;
                        background-size: contain;
                        background-position: right center;
                        padding: 14px 180px 0 0;
                        margin: 30px 50px 0 0;
                        box-sizing: border-box;
                    }
                    .zfb {
                        width: 100px;
                        height: 40px;
                        background-position: right;
                        padding: 14px 180px 0 0;
                        margin: 30px 50px 0 0;
                        background: url("../../assets/image/icon/icon-zfb.png") no-repeat;
                        background-size: contain;
                        background-position: right center;
                        box-sizing: border-box;
                    }
                }
            }
            .count-box {
                display: flex;
                padding: 0 30px;
                align-items: center;
                justify-content: space-between;
                border-top: 1px solid #f7f7f7;
                height: 80px;
                font-size: 14px;
                color: #666;
                p {
                    span {
                        font-size: 20px;
                        font-weight: bold;
                        color: #FF6666;
                    }
                }
                .button {
                    height: 40px;
                    width: 126px;
                    line-height: 40px;
                    border-radius: 20px;
                    background: #FF6666;
                    text-align: center;
                    color: #fff;
                    cursor: pointer;
                }
                .pay-box {
                   display: flex;
                    .pay {
                        margin-right: 20px;
                        height: 40px;
                        width: 126px;
                        line-height: 40px;
                        border-radius: 20px;
                        background: #FF6666;
                        text-align: center;
                        color: #fff;
                        cursor: pointer;
                    }
                }
            }
        }
        .popup {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: center;
            .body {
                position: relative;
                background: #fff;
                padding: 20px 20px 10px;
                border-radius: 10px;
                .qrcode {
                    width: 300px;
                    height: 300px;
                }
                p {
                    margin: 0;
                    line-height: 30px;
                    text-align: center;
                }
            }
        }
    }
</style>
